<template>
	<view class="tabs-container" :style="{width:tabs.width, height:tabs.height}">
		<view 
			v-for="(item, index) in tabs.list" 
			:key="index" 
			class="tolbar-item" 
			:class="{'splier':index != tabs.length-1, 'is-active':currentIndex==item.selectedIndex}"
			:style="{
				width:`${100/(tabs.length)}%`, 
				background:`${currentIndex == item.selectedIndex?'linear-gradient(10deg,' + theme.primary + ' 30%, '+ theme.primaryLight +', ' + theme.primary + ' 70%)': 'transparent'}`}"
			 @tap="buttonClick(item.selectedIndex)">
			{{item.text}}
		</view>
	</view>
</template>

<script>
	export default{
		name: 'jTabs',
		props:{
			tabs: Object,
			controlIndex: Number
		},
		data(){
			return{
				theme: this.$theme,
				currentIndex: -1
			}
		},
		watch:{
			controlIndex(e){
				if(e == 0 || e){
					this.currentIndex = e
				}
			}
		},
		created() {
			this.currentIndex = this.tabs.defaultIndex
		},
		methods:{
			buttonClick(selectedIndex){
				this.currentIndex = selectedIndex
				this.$emit('change', this.currentIndex)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs-container{
		display: flex;
		justify-content: space-around;
		align-items: center;
		border: 1px solid #c0c0c0;
		position: relative;
		.tolbar-item{
			width: 50%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
		}
		.splier:after{
			content: "";
			position: absolute;
			top: 0;
			right: -1.5rpx;
			width: 0;
			height: 100%;
			border-right: 3rpx solid #c0c0c0;
		}
		.tolbar-item:active{
			background-color: #e2e2e2;
		}
		.is-active{
			color: #fff;
		}
	}
</style>
